<template>
  <div class="edit_data">
    <!-- 顶部导航栏 -->
    <head-nav-bar>
      <template #left>
        <div class="head_name" @click="back">
          <img class="return" src="../../images/return.png" alt="" />
          <span class="return_">返回</span>
        </div>
      </template>
      <template #center>
        <div class="head_name2">编辑资料</div>
      </template>
    </head-nav-bar>
    <div class="kongbai"></div>
    <!-- 中间内容区 -->
    <div class="content">
      <div class="photo atn">
        <input class="file" type="file" multiple accept="image/*" />
        <span class="ert">头像</span>
        <img
          class="photo_img"
          src="https://www.hualigs.cn/image/60364a03036ce.jpg"
          alt=""
        />
        <img class="mkl" src="../images/left.png" alt="" />
      </div>
      <div class="line_"></div>
      <div class="admin_name atn" @click="actionNameFun">
        <span class="nicheng">昵称</span>
        <span class="jieshao">{{ this.loginForm }}</span>
        <img class="mkl" src="../images/left.png" alt="" />
      </div>
      <div class="line_"></div>
      <div class="born atn" @click="openPicker">
        <span class="nicheng">生日</span>
        <span class="jieshao">{{ this.birth }}</span>
        <img class="mkl" src="../images/left.png" alt="" />
      </div>
      <div class="line_"></div>
      <div class="sex atn" @click="actionSsexFun">
        <span class="nicheng">性别</span>
        <span class="jieshao">{{ this.ssex }}</span>
        <img class="mkl" src="../images/left.png" alt="" />
      </div>
      <div class="line_"></div>
      <div class="location atn" @click="actionCityFun">
        <span class="nicheng">现居城市</span>
        <span class="jieshao">{{ this.slectCity }}</span>
        <img class="mkl" src="../images/left.png" alt="" />
      </div>
    </div>

    <!-- <div class="box" v-show="status">
      <div class="center">
       
      </div>
    </div> -->

    <!-- 昵称框 -->
    <mt-popup v-model="actionName" class="NameBox">
      <div class="user">
        <h3>修改昵称</h3>
        <input
          class="userInput"
          ref="userInput"
          placeholder="请输入修改的昵称~"
          autofocus="autofocus"
        />
      </div>
      <div class="control">
        <div class="left" @click="close">取消</div>
        <div class="right" @click="sindName">确定</div>
      </div>
    </mt-popup>

    <!-- 生日框 -->
    <mt-popup v-model="actionName" class="NameBox">
      <div class="user">
        <h3>修改昵称</h3>
        <input
          class="userInput"
          ref="userInput"
          placeholder="请输入修改的昵称~"
          autofocus="autofocus"
        />
      </div>
      <div class="control">
        <div class="left" @click="close">取消</div>
        <div class="right" @click="sindName">确定</div>
      </div>
    </mt-popup>

    <!-- 生日框 -->
    <mt-datetime-picker
      ref="birthPicker"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm"
      @cancel="checkinCancel"
    >
    </mt-datetime-picker>

    <!-- 性别框 -->
    <mt-actionsheet :actions="data" v-model="actionSsex"> </mt-actionsheet>

    <!-- 地址框 -->
    <mt-popup v-model="actionAddress" position="bottom" class="AdderssBox">
      <mt-picker
        ref="picker"
        :slots="AddressSlots"
        @change="onAddressChange"
      ></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
import HeadNavBar from "../../../components/HeadNavBar";
// 获取地址json数据
import cityData from "../../../data/cityData.json";

import http from "../../../API/http.js";

export default {
  sockets: {
    receiveMsg(data) {
      console.log(data);
      let datas = this.$store.state.userinfo.userList;
      // console.log(datas);
      var flag = true;
      if (datas.length === 0) {
        this.$store.commit("setuserList", data);
      } else {
        for (let i = 0; i < datas.length; i++) {
          // console.log(datas[i]);
          if (datas[i].userid === data.userid) {
            datas[i].content = data.content;
            // console.log("第二次发");
            flag = false;
            break;
          }
        }
        if (flag === true) {
          this.$store.commit("setuserList", data);
          // console.log("第一次发");
        }
      }
    }
  },
  created() {
    this.initData();
  },

  data() {
    return {
      status: false,
      loginForm: "cedar.xi",
      birth: "2011-01-03",
      ssex: "女",
      slectCity: "河北省-张家口市",
      dataItems: {
        procurementDate: ""
      },
      defaultDate: "", //默认时间
      startDate: new Date("1990-01-01"), //起始时间 ,
      data: [
        {
          name: "男",
          method: this.boy // 调用methods中的函数
        },
        {
          name: "女",
          method: this.girl // 调用methods中的函数
        }
      ],

      // 省
      provinceArry: ["a"],
      // 市/区
      countyArry: ["ccc"], // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏
      actionSsex: false,
      actionAddress: false,
      actionName: false,
      // 地址插槽
      AddressSlots: [
        {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "right"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "left"
        }
      ]
    };
  },
  components: {
    HeadNavBar
  },
  methods: {
    async initData() {
      let id = window.localStorage.ID;

      // 获取用户信息
      const { data: info } = await http._user({ id });

      // 获取用户名
      this.loginForm = info.data.username;

      // 获取生日

      let bir = info.data.birthday.split("T");
      this.birth = bir[0];
      this.ssex = info.data.sex;
      this.slectCity = info.data.address;

      // 获取json数据
      let data = cityData.cityData;
      let prov = [];
      let coun = [];
      // 拆割json中的数据
      for (let i = 0; i < data.length; i++) {
        prov.push(data[i].province);
        coun.push(data[i].city.county);
      }
      console.log(prov, coun);
      // 将省份的数据添加
      this.AddressSlots[0].values = prov;

      // 默认将北京市下面的区，作为初始化区
      this.AddressSlots[2].values = coun[0];
    },
    back() {
      this.$router.push("/admin"); //返回上一层
    },

    actionNameFun() {
      this.actionName = true;
    },
    close() {
      this.actionName = false;
    },
    sindName() {
      this.actionName = false;
      console.log(this.$refs.userInput.value);
      this.loginForm = this.$refs.userInput.value;
      window.localStorage.Authorization = this.loginForm;
    },

    // 省区联动变化效果
    onAddressChange(picker, values) {
      this.slectCity = "河北省-张家口市";
      let data = cityData.cityData;
      // 循环数据，根据当前选中的左面省份的value 去找json数据对应的市区
      for (let i = 0; i < data.length; i++) {
        // console.log("cc",picker.getSlotValue(0),i)
        if (picker.getSlotValue(0) == data[i].province) {
          picker.setSlotValues(1, data[i].city.county);
        }
      }
      let pro = picker.getSlotValue(0);
      let cun = picker.getSlotValue(1);

      // 避免初始值为null
      if (pro != null && cun != null) return (this.slectCity = pro + "-" + cun);
    },

    // 打开生日框架
    openPicker() {
      let vm = this;
      if (vm.dataItems.procurementDate) {
        vm.defaultDate = vm.dataItems.procurementDate;
      } else {
        vm.defaultDate = new Date();
      }
      this.$refs.birthPicker.open();
    },

    // 确定日期
    handleConfirm(data) {
      let vm = this;
      vm.dataItems.procurementDate = this.formatDate(data);
      console.log(this.formatDate(data));
      this.birth = this.formatDate(data);
      this.$refs.birthPicker.close();
    },

    // 取消日期
    checkinCancel() {
      console.log(this.$refs.picker);
      this.$refs.birthPicker.close();
    },

    //时间格式化
    formatTen(num) {
      return num > 9 ? num + "" : "0" + num;
    },

    formatDate(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      return year + "-" + this.formatTen(month) + "-" + this.formatTen(day);
    },

    // 打开性别框
    actionSsexFun() {
      // 打开action sheet
      this.actionSsex = true;
    },
    boy() {
      this.ssex = "男";
    },
    girl() {
      this.ssex = "女";
    },
    actionCityFun() {
      this.actionAddress = true;
    },
    // 上传图片显示
    tirggerFile(event) {
      var file = event.target.files;
      var reader = new FileReader(); //读取文件
      reader.readAsDataURL(file[0]);
      reader.onload = function() {
        document.getElementById("img1").src = reader.result;
      };
    }
  }
};
</script>
<style scoped>
.edit_data {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f3f3f3;
}
.head_name {
  position: absolute;
  height: 25px;
  width: 60px;
  line-height: 25px;
}
.return {
  position: absolute;
  top: 2px;
  height: 21px;
  width: 21px;
}
.return_ {
  position: absolute;
  top: 0;
  left: 22px;
  height: 25px;
  line-height: 25px;
}
.head_name2 {
  margin: 0 auto;
}
.kongbai {
  height: 20px;
}

.content {
  height: 280px;
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  padding: 0 10px 0 20px;
  font-size: 14px;
}

.atn {
  width: 100%;
  height: 50px;
  position: relative;
}
.photo {
  width: 100%;
  height: 70px;
}
.ert {
  height: 70px;
  line-height: 70px;
}
.photo_img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  height: 49px;
  width: 49px;
  border-radius: 10px;
}

.nicheng {
  line-height: 50px;
}
.jieshao {
  line-height: 50px;
  position: absolute;
  right: 30px;
}
.mkl {
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.line_ {
  width: 100%;
  height: 1px;
  background-color: #cccccc;
  margin: 0 auto;
}

/* .box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(54, 54, 54, 0.5);
}

.box .center {
  width: 80%;
  background: #ffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

/* .box .center .user{
  width:88%;
  margin:0 auto;
} */

.user h3 {
  text-align: center;
}

.user {
  width: 90%;
  margin: 0 auto;
}

.user .userInput {
  width: 100%;
  height: 35px;
  background: rgba(60, 60, 60, 0.15);
  outline: none;
  border: 1px solid gray;
  padding-left: 10px;
  margin-bottom: 25px;
}

/* .box .center .control {
  width:100%;
  height:50px;
} */

.control div {
  width: 50%;
  float: left;
  text-align: center;
  line-height: 50px;
}

.control div:active {
  background: lightblue;
  color: #fff;
}

.file {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.AdderssBox {
  width: 100%;
}

.NameBox {
  width: 72%;
  border-radius: 5px;
}
</style>
